<template>
  <div>
    <validator name='v'  @valid="$emit('valid')"  @invalid="$emit('invalid')">
    <form class="form-horizontal">
      <div class="row">
        <div class="col-sm-3 form-group form-input-group"  :class="[$v.f_user_name.required ? 'has-error' : '']">
          <label for="f_user_name" class="control-label">单位名称</label>
          <input type="text"  v-model="baseinfo.base.f_user_name" v-validate:f_user_name='{required: true }' class="form-control" placeholder="用户姓名" v-next-el="phone">
        </div>

        <div class="col-sm-3 form-group form-input-group"   :class="[$v.f_user_phone.required ? 'has-error' : '']">
          <label for="f_user_phone" class="control-label">单位电话</label>
          <input type="text"  v-model="baseinfo.base.f_user_phone" v-validate:f_user_phone="{required: true }" class="form-control" placeholder="用户电话" v-el:phone v-next-el="area">
        </div>

        <div class="col-sm-3 form-group form-input-group" :class="[$v.area.required ? 'select-error' : '']">
          <label for="area" class="control-label">区/县</label>
          <!-- <v-select
            :value.sync="baseinfo.base.f_area"
            v-model="baseinfo.base.f_area"
            :options='areas'
            placeholder='区/县'
            @selected='areaChanged'
            close-on-select></v-select> -->
            <input type="text" v-show="false" v-model="$refs.area.selectedItems" v-validate:area='{required: true }'>
            <v-select :value.sync="baseinfo.base.f_area" :options='areas' @selected='areaChanged' placeholder='区/县' close-on-select
              v-model='baseinfo.base.f_area' v-ref:area></v-select>
        </div>

        <div class="col-sm-3 form-group form-input-group" :class="[$v.slice.required ? 'select-error' : '']">
          <label for="slice" class="control-label">片区</label>
          <!-- <input type="text"  v-model="baseinfo.base.f_slice_area" class="form-control" placeholder="片区/管理站" v-el:slice v-next-el="street"> -->
          <!-- <v-select :value.sync="baseinfo.base.f_slice_area" v-model="baseinfo.base.f_slice_area"
              :options='sliceArea' placeholder='片区/管理站' close-on-select></v-select> -->
          <input type="text" v-show="false" v-model="$refs.slice.selectedItems" v-validate:slice='{required: true }'>
          <v-select :value.sync="baseinfo.base.f_slice_area" :options='sliceArea' placeholder='片区/管理站' close-on-select
            v-model='baseinfo.base.f_slice_area' v-ref:slice></v-select>
        </div>

      </div>
      <div class="row">
        <!-- <div class="col-sm-3 form-group form-input-group" :class="[$v.f_room.required ? 'has-error' : '']">
          <label for="f_room" class="control-label">门牌号</label>
          <input type="text" v-model="baseinfo.base.f_room" v-validate:f_room='{required: true }'
          class="form-control" id="f_room" placeholder="门牌号" v-el:room v-next-el="address" @input="address()">
        </div> -->
        <div class="col-sm-3 form-group form-input-group"  :class="[$v.f_street.required ? 'has-error' : '']">
          <label for="f_street" class="control-label">街道名称</label>
          <input type="text"  v-model="baseinfo.base.f_street" v-validate:f_street='{required: true }'
          class="form-control" placeholder="街道名称" v-el:street v-next-el="areaname" @input="address()">
        </div>

        <div class="col-sm-9 form-group form-input-group" :class="[$v.f_address_detail.required ? 'has-error' : '']">
          <label for="f_address" class="control-label">详细地址</label>
          <!-- <input type="text" v-model="baseinfo.base.f_address" class="form-control" id="f_address" placeholder="详细地址" v-el:address v-next-el="idnumber" > -->
          <div class="flex-row">
            <input type="text" v-model="baseinfo.base.f_address" class="form-control" id="f_address" readonly >
            <input type="text" v-model= "baseinfo.base.f_address_detail" class="form-control" v-validate:f_address_detail='{required: true }' placeholder="详细地址" v-el:address v-next-el="idnumber">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3 form-group form-input-group">
          <label for="f_contract" class="control-label">合同编号</label>
          <input type="text"  v-model="baseinfo.base.f_contract_id" class="form-control" placeholder="合同编号">
        </div>
        <div class="col-sm-3 form-group form-input-group">
          <label for="f_credentials" class="control-label">证件类型</label>
          <v-select :value.sync="baseinfo.base.f_credentials"
              :options='credentials' placeholder='证件类型'
              close-on-select></v-select>
        </div>
      <!-- </div>

      <div class="row"> -->
      <!-- 不是身份证暂时取消验证，保留，防止以后又改 -->
      <!-- <div class="col-sm-6 form-group form-input-group" :class="[$v.f_idnumber2.required ? 'has-error' : '']" v-if="baseinfo.base.f_credentials[0] !== '身份证'">
          <label for="f_idnumber" class="control-label">证件号码</label>
          <input type="text"  v-model="baseinfo.base.f_idnumber" v-validate:f_idnumber2='{required: true}' class="form-control" placeholder="证件号码" v-el:idnumber>
      </div> -->
      <div class="col-sm-6 form-group form-input-group"  v-if="baseinfo.base.f_credentials[0] !== '身份证'">
          <label for="f_idnumber" class="control-label">证件号码</label>
          <input type="text"  v-model="baseinfo.base.f_idnumber" class="form-control" placeholder="证件号码" v-el:idnumber>
      </div>
      <div class="col-sm-6 form-group form-input-group" :class="[$v.f_idnumber.identityCardValid ? 'has-error' : '']" v-if="baseinfo.base.f_credentials[0] === '身份证'">
          <label for="f_idnumber" class="control-label">证件号码</label>
          <input type="text"  v-model="baseinfo.base.f_idnumber" v-validate:f_idnumber='{identityCardValid: true}' class="form-control" placeholder="证件号码" v-el:idnumber>
      </div>


      </div>
      <div class="row">
        <div class="col-sm-3 form-group form-input-group">
          <label for="f_username" class="control-label">缴费类型</label>
            <v-select :value.sync="baseinfo.base.f_cost_type"
                v-model="baseinfo.base.f_cost_type"
                :options='costtypes' placeholder='缴费类型'
                close-on-select></v-select>
        </div>
        <div class="col-sm-3 form-group form-input-group" id='userfiles-useEssInf-用户类型'>
          <label for="f_username" class="control-label">用户类型</label>
          <v-select :value.sync="baseinfo.base.f_user_type" placeholder='用户类型'
              :options='usertypes' v-model="baseinfo.base.f_user_type"
              close-on-select :disabled="!modify"></v-select>
        </div>

        <div class="col-sm-3 form-group form-input-group" id='userfiles-useEssInf-用气性质'>
          <label for="f_username" class="control-label">用气性质</label>
          <v-select :value.sync="baseinfo.base.f_gasproperties" v-model="baseinfo.base.f_gasproperties"
              :options='gasproperties' placeholder='用气性质'
              close-on-select></v-select>
        </div>
        <div class="col-sm-3 form-group form-input-group">
          <label for="f_username" class="control-label">用户状态</label>
          <v-select :value.sync="baseinfo.base.f_user_state" v-model="baseinfo.base.f_user_state"
              :options='userstates' placeholder='用户状态'
              close-on-select></v-select>
        </div>
      </div>
      <div class="row">
        <div class="select-overspread col-sm-4 form-group form-input-group">
          <label for="f_adjustable" class="control-label">调压箱</label>
          <div class = "col-sm-3" :class="[$v.adjustable.required ? 'select-error' : '']">
            <input type="text" v-show="false" v-model="$refs.adjustable.selectedItems" v-validate:adjustable='{required: true }'>
            <v-select :value.sync="baseinfo.base.f_adjustable" :options='adjustables' placeholder='调压箱' close-on-select
              v-model='baseinfo.base.f_adjustable' :search='true' v-ref:adjustable></v-select>
          </div>
        </div>
      </div>


      <ul class="nav nav-tabs" style="margin-bottom: 10px;" v-if="baseinfo.base.f_cost_type[0] === '银行代扣'">
          <li role="presentation" class="active"><a href="#">银行信息</a></li>
      </ul>

      <div v-if="baseinfo.base.f_cost_type[0] === '银行代扣'">
        <div class="row" >
          <div class="col-sm-3 form-group form-input-group" :class="[$v.f_bank_accopen.required ? 'has-error' : '']">
            <label for="f_username" class="control-label">银行户名</label>
            <input type="text"  v-model="baseinfo.bank.f_bank_accopen"
            class="form-control" id="f_username" placeholder="用户姓名" v-validate:f_bank_accopen='{required: true}'
            v-next-el="bankaccount">
          </div>

          <div class="col-sm-3 form-group form-input-group" id='userfiles-useEssInf-银行名称'>
            <label for="f_username" class="control-label ">银行名称</label>
            <!-- <input type="text"  v-model="baseinfo.bank.f_bank_name" class="form-control" id="f_username" placeholder="银行名称" v-el:costtype v-next-el="bankaccount"> -->
            <v-select :value.sync="baseinfo.bank.f_bank_name"
                :options='banknames' placeholder='银行名称'
                close-on-select></v-select>
          </div>

          <div class="col-sm-6 form-group form-input-group" :class="[$v.f_bank_account.required ? 'has-error' : '']">
            <label for="f_userid" class="control-label">银行账号</label>
            <input type="text"  v-model="baseinfo.bank.f_bank_account" class="form-control"
             v-validate:f_bank_account='{required: true}'placeholder="银行账号" v-el:bankaccount v-next-el="bankidnumber">
          </div>
        </div>
        <div class="row" >
          <div class="col-sm-6 form-group form-input-group" :class="[$v.f_bank_idnumber.identityCardValid ? 'has-error' : '']">
            <label for="f_bank_idnumber" class="control-label">身份证号</label>
            <input type="text"  v-model="baseinfo.bank.f_bank_idnumber" v-validate:f_bank_idnumber='{identityCardValid: true}' class="form-control" aria-describedby="helpBlock" placeholder="身份证号" v-el:bankidnumber>
          </div>
          <span id="helpBlock" class="help-block">银行卡所属人身份证号</span>
        </div>
      </div>

    </form>
  </validator>
  </div>
</template>

<script>
import AppData from '../../stores/AppData'
import co from 'co'

let getAreaGen = function * (self) {
  console.log('获取区')
  let getAreas = yield self.$post('/rs/search', {source: 'tool.getChildrenOfResName($区$)', userid: ''}, {resolveMsg: null, rejectMsg: null})
  getAreas.data.forEach((item, next) => {
    let temp = {}
    temp.label = item.name
    temp.value = item.name
    self.areas.push(temp)
  })
}

let getSliceGen = function * (self, val) {
  let slices = yield self.$post('/rs/search', {source: `tool.getChildrenOfResName($${val}$)`, userid: ''}, {resolveMsg: null, rejectMsg: null})
  self.sliceArea = []
  slices.data.forEach((item, next) => {
    let temp = {}
    temp.label = item.name
    temp.value = item.name
    self.sliceArea.push(temp)
  })
}

export default {
  title: '基本信息',
  props: ['baseinfo', 'modify'],
  data () {
    return {
      areas: [],
      sliceArea: [],
      imgdefault: '/images/mainicon/biaopan.png'
    }
  },
  ready () {
    this.getArea()
  },
  methods: {
    onValid (res) {
      this.$dispatch('valid')
    },
    onInvalid (res) {
      this.$dispatch('invalid')
    },
    getArea () {
      let area = getAreaGen(this)
      co(area)
    },
    areaChanged (val) {
      console.log('小区更改，，', val)
      this.address()
      let slice = getSliceGen(this, val)
      co(slice)
    },
    address () {
      let strAddress = `${this.baseinfo.base.f_area.length > 0 ? this.baseinfo.base.f_area[0] + '-' : ''}${this.baseinfo.base.f_street ? this.baseinfo.base.f_street + '' : ''}`
      this.baseinfo.base.f_address = strAddress
      return strAddress
    }
  },
  // ready () {

  //   console.log('非民用建档...', this.baseinfo)

  // },

  watch: {
    // 重置验证结果，当证件类型切换时，验证结果不能立即刷新，需要重置

    'baseinfo.base.f_credentials[0]' () {
      console.log('事件重置')
      this.$resetValidation()
    },
    'baseinfo.base.f_area[0]' (val) {
      console.log('观察到变化')
      this.areaChanged(val)
    },
    // 当选择销户，需要给其提醒是否进行销户

    'baseinfo.base.f_user_state' (val) {
      if (val[0] === '销户') {
        this.$showMessage('是否要对该用户进行销户操作？', ['confirm', 'cancel']).then((res) => {
          if (res !== 'confirm') {
            this.baseinfo.base.f_user_state = ['正常']
          }
        })
      }
    }
  },
  computed: {
    usertypes () {
      return AppData.getParam('用户类型')
    },
    inputtores () {
      return AppData.getParam('抄表员')
    },
    credentials () {
      return AppData.getParam('证件类型')
    },
    costtypes () {
      return AppData.getParam('缴费类型')
    },
    gasproperties () {
      return AppData.getParam('用气性质')
    },
    banknames () {
      return AppData.getParam('银行名称')
    },
    userstates () {
      return AppData.getParam('用户状态')
    },
    adjustables () {
      let arr = []
      AppData.getAdjustable().forEach((item) => {
        let temp = {}
        temp.label = `[${item.value.f_adjustable_id}]-${item.label}`
        temp.value = item.value
        arr.push(temp)
      })
      return arr
      // return AppData.getAdjustable()
    }
  }
}
</script>
